<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <div id="demo" class="one" title="hello" data-id="0"></div> -->
        <!-- 
            let a = "demo";
            div.setAttribute("id",a);
         -->

        <!-- 期望 -> 将data中的数据动态的绑定到DOM元素中,作为元素的属性值 -->
        <!-- Mustache 语法不能作用在 HTML 属性上 => 报错 -->
        <!-- <div id="{{a}}" class="one" title="hello" data-id="0"></div> -->


        <!-- v-bind 将data中的数据动态的绑定到DOM元素中,作为元素的属性值 -->
        <!-- 用法 v-bind:参数="执行值"   参数=>属性名   指令值=>属性值 -->
        <!-- v-bind:id="a"   => 等价于 div.setAttribute("id",a); -->
        <div v-bind:id="a" v-bind:class="b" v-bind:title="c" v-bind:data-id="d"></div>

        <div>
            <a v-bind:href="goods.link">
                <img v-bind:src="goods.img" width="150" height="150" alt="">
                <p class="name">{{goods.name}}</p>
                <p class="price" v-text="goods.price"></p>
            </a>
        </div>

        <div>

            <!-- 属性值为true false => 常见应用 checked disabled hidden -->
            <input type="checkbox" v-bind:hidden="boolB">


            <!-- 如果指令的值为 false null undefined => 绑定的属性将不会生效(甚至不会被包含在渲染出来)  -->
            <div v-bind:id="boolA" v-bind:class="boolB" v-bind:title="e" v-bind:data-id="f">
                11111111
            </div>


            <!-- v-bind:指令的值能否是 数组或对象  (一般情况下不会使用直接数组或对象作为指令的值(xxx.toString())  => 但是class和style除外) -->
            <div v-bind:title="arr">22222</div>
            <div v-bind:title="obj">33333</div>
        </div>

        <h3>v-bind简写 (可以省略v-bind,注意:不能省略)</h3>
        <div :id="a" :class="b" :title="c" :data-id="d"></div>

        <div>
            <a :href="goods.link">
                <img :src="goods.img" width="150" height="150" alt="">
                <p class="name">{{goods.name}}</p>
                <p class="price" v-text="goods.price"></p>
            </a>
        </div>

    </div>
</body>
<script>

    // 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 小结: 指令(Vue中定义的指令  => 标签的属性存在 )
    // 1. 指令是带有 v- 前缀的特殊属性   (v-text  v-html v-pre v-if v-show v-bind v-on v-for v-model)
    // 2. 指令的属性值 预期是单个JavaScript表达式
    // 3. 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 指令用法1:
    // v-指令名="指令值"   例如: v-html="html"

    // 指令用法2:
    // 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
    // v-指令名:参数="指令值"   例如: v-on:click="a++"  v-bind:id="a"

    // 常见指令:
    // v-text  将标签内的内容,替换为指定对应的值(text)
    // v-html  将标签内的内容,替换为指定对应的值(html结构 -> 标签和文本 )
    // v-pre   标签内的{{}}双大括号会保留原本的结构,不被Vue应用解析为 文本插值  ({{xxx}}中的内容原样输出)
    // v-if    条件渲染,将指令的表达式的结果作为条件,判断该元素是否被渲染 (内容只会在指令的表达式返回 truthy 值的时候被渲染。)
    // v-show  根据条件判断元素是否显示,如果指令的表达式的结果作为true => 显示(display:block),否则就隐藏(display:none) -> 就结果而言,所有的元素都渲染了,只能是否显示的问题
    // v-on 绑定事件  简写 @

    // v-bind   v-bind 将data中的数据动态的绑定到DOM元素中,作为元素的属性值 


    var vm = new Vue({
        el: "#app",
        data: {
            a: "demo",
            b: "one",
            c: "hello",
            d: 0,
            goods: {
                name: "Xiaomi 13 限量定制色",
                img: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1670746083.00383245.png",
                link: "https://www.mi.com/shop/buy/detail?product_id=17972",
                price: 4999
            },
            boolA: true,
            boolB: false,
            e: null,
            f: undefined,
            arr: [1, 2, 3],
            obj: { a: 1, b: 2 }

        },
        methods: {

        }

    })



</script>

</html>